html,body {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow-x: hidden;
		scroll-behavior: smooth;
	}

#main-canvas {
	width: 100%;
	height: 100%;
}
#canvas{
	height: 99%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
a{
	text-decoration: none;
}
.filter {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow-y: hidden;
	top: 0;
	left: 0;
	background: #fe5757;
	animation: colorChange 30s ease-in-out infinite;
	animation-fill-mode: both;
	mix-blend-mode: overlay;
}

@keyframes colorChange {
	0%,
	100% {
		opacity: 0;
	}
	50% {
		opacity: .7;
	}
}

#app{
	position: absolute;
	width: 100%;
	height: 100%;
}
.myinfo{
	background-color: rgba(100,123,202,0.2);
	width: 460px;
	height: 280px;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
.myhead{
	display: inline-block;
	position: absolute;
	top:10px;
	right:30px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	position: absolute;
}
.myheadimg{
	width: 100%;
	height: 100%;
	border:5px solid #DCDCDC;
	border-radius: 50%;
	cursor: pointer;
}
.myname{
	font-size: 46px;width: 50%;padding: 30px;display: inline-block;color: inherit;
	cursor: pointer;
	font-family: cursive;
}
.gender_icon{
	background-color: #4169E1;
	position:relative;
	left: 50px;
	bottom: 20px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	color: white;
	font-weight: bolder;
	text-align: center;
}

.info_icon{
	width: 16px;vertical-align: middle;height: 16px;margin-right: 3px;
	margin-left: 10px;
	cursor: pointer;
}
.myname span:hover{
	color: white;
	font-weight: bolder;
}
.myheadimg:hover{
	border: 5px solid red;;
}
.chanagecolor{
	cursor: pointer;
}

.chanagecolor:hover{
	color: white;
}

.navigation{
	list-style: none;width: 100%;text-align: center;
	margin-left: 0px;
}
.navigation li{
	display: inline-block;
	margin-top: 20px;
	margin-left: 50px;
	margin-right: 50px;
	cursor: pointer;
}
.nocheckedli{
	color: rgba(150, 115, 250, 0.9);
}
.checkedli{
	color: rgba(35, 6, 255, 0.7);
	font-weight: bolder;
}